<div id="top-left">
  <span class="location-title">直播间</span>
</div>
<div class="main-content">
  <div class="live-nav">
    <div class="live-btns">
      <button (click)="createOpen()" nz-button nzType="primary"><i nz-icon nzType="plus"></i>创建直播间</button>
    </div>
    <div>您可以多创建 {{maxLiveRoomCount}} 个直播间，已创建 {{totalCount}} 个。</div>
  </div>
  <div class="live-content">
    <div class="live-item" *ngFor="let item of datalist; let no = index;" (click)="goDetail(item.id)">
      <img *ngIf="item['logo'] && item['logo'] !== ''" [src]="ossUrl + item['logo']" />
      <img *ngIf="!item['logo'] || item['logo'] === ''" src="/assets/images/default-vr-bg.png" />
      <div class="item-top">
        <img src="/assets/images/vr.png" />
        <span>
          {{item['status'] === 0 ? '无直播' : item['status'] === 1 ? '直播中' : item['status'] === 2 ? '已断开' : '已播完'}}
        </span>
      </div>
      <div class="item-bottom">
        {{item['title']}}
      </div>
    </div>
  </div>
</div>
<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isCreateShow" (nzOnCancel)="createClose()"
  [nzMaskClosable]="false" nzWidth="800" nzTitle="创建新直播" [nzFooter]="null">
  <form style="max-width: 760px;" nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="title">直播标题</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="请输入直播标题!">
        <input type="text" nz-input formControlName="title" placeholder="直播标题" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="liveDate">直播时间</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="请选择直播时间!">
        <nz-range-picker [nzShowTime]="true" [nzDisabledDate]="disabledDate" formControlName="liveDate">
        </nz-range-picker>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="introduce">直播描述</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="请输入直播描述!">
        <textarea rows="4" nz-input formControlName="introduce"></textarea>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="images">直播LOGO</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24">
        <nz-upload class="avatar-uploader" [nzAction]="uploadUrl" [nzHeaders]="headers" nzName="cover"
          nzListType="picture-card" [nzShowUploadList]="false" [nzBeforeUpload]="beforeUpload"
          (nzChange)="handleChange($event)">
          <ng-container *ngIf="!logoUrl">
            <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>
            <div class="ant-upload-text">Upload</div>
          </ng-container>
          <img *ngIf="logoUrl" [src]="logoUrl" style="width: 100%" />
        </nz-upload>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzSpan]="16" [nzOffset]="4">
        <button nz-button [nzType]="'primary'">提交</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>
